<template>
    <el-dialog v-model="dialogFormVisible" title="修改密码">
        <el-form :model="form" label-width="auto" :rules="rules" ref="ruleFormRef">
            <el-form-item label="旧密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入旧密码" type="password" show-password />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="form.newPassword" placeholder="请输入新密码" type="password" show-password />
            </el-form-item>
            <el-form-item label="确认密码" prop="confPassword">
                <el-input v-model="form.confPassword" placeholder="请输入确认密码" type="password" show-password />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">返回</el-button>
                <el-button type="primary" @click="editPassword">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup name="editPassword">
import { ref, onMounted } from "vue"
import api from "@/api"
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const ruleFormRef = ref()
const dialogFormVisible = ref(false)
const form = ref({})
const user = ref()
const rules = ref({
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^\S{6,15}$/, message: '密码必须是 6-15位 的非空字符', trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^\S{6,15}$/, message: '密码必须是 6-15位 的非空字符', trigger: 'blur' }
    ],
    confPassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^\S{6,15}$/, message: '密码必须是 6-15位 的非空字符', trigger: 'blur' }
    ]
})

const init = () => {
    dialogFormVisible.value = true
}
const editPassword = () => {
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            if (form.value.newPassword !== form.value.confPassword) {
                ElMessage.error('新密码与确认密码不一致')
                return
            }
            const verifyParams = { userId: user.value.userId, password: form.value.password }
            api.post('/author/verifyPassword', verifyParams).then(verifyRes => {
                if (verifyRes.data.code === 200) {
                    const editParams = { userId: user.value.userId, password: form.value.newPassword }
                    api.post('/author/editPassword', editParams).then(editRes => {
                        if (editRes.data.code === 200) {
                            dialogFormVisible.value = false
                            ElMessage.success('修改成功，2s后跳转到登录页面重新登录！')
                            setTimeout(() => {
                                localStorage.removeItem("access-admin")
                                router.push("/login")
                            }, 2000)
                        } else {
                            ElMessage.error(editRes.data.msg)
                        }
                    })
                } else {
                    ElMessage.error(verifyRes.data.msg)
                }
            })
        }
    })
}
defineExpose({
    init
});
onMounted(() => {
    let str = window.localStorage.getItem("access-admin")
    user.value = JSON.parse(str)
})

</script>